<template>
	<z-paging-swiper ref="paging" class="z-paging" :swiper-style="{ top: '0px' }">
		<template v-slot:top>
			<z-tabs ref="tabs" :current="current" :list="tabList" @change="tabsChange"></z-tabs>
		</template>
		<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
		<swiper class="swiper" :current="current" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
				<pagin-item-vue :item="item" :swiperCurrent="index" :current="current" :state="item.value" />
			</swiper-item>
		</swiper>
	</z-paging-swiper>
</template>

<script setup>
import http from '@/common/request.js';
import { onLoad, onUnload } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue';
import { getImgSrc, navTo } from '@/common/utils';
import paginItemVue from './paginItem/paginItem.vue';

const list = ref([
	{
		iconPath: 'car',
		selectedIconPath: 'car-fill',
		text: '路线计划',
		customIcon: false,
		activeColor: 'rgb(80, 152, 255)',
		inactiveColor: ''
	},
	{
		iconPath: 'account',
		selectedIconPath: 'account-fill',
		text: '我的',
		customIcon: false,
		activeColor: 'rgb(80, 152, 255)',
		inactiveColor: ''
	}
]);

const tabList = ref([
	// {
	// 	name: '全部',
	// 	value: ''
	// },
	{
		name: '进行中',
		value: 0
	},
	{
		name: '已完成',
		value: 1
	}
]);

const current = ref(0);

const animationfinish = (d) => {
	current.value = d.detail.current;
};

const tabsChange = (index) => {
	current.value = index;
};
</script>

<style lang="scss" scoped>
.swiper {
	height: 100%;
}
</style>
